<template>
  <!-- 主页容器 -->
  <div class="index-container">
    <el-container>
      <!-- 全局配置 -->
      <el-config-provider :size="size" :locale="locale=='zh'?zhCn:en">
        <!-- 侧边导航栏组件 -->
        <el-aside width="auto">
          <TreeMenu :is-collapse="isCollapes"></TreeMenu>
        </el-aside>
        <el-container>
          <el-header>
            <div style="display:flex">
              <!-- 面包屑组件 -->
              <div style="width:50%">
                <HeaderBreadcrumb @is-collapses="isCollapes = $event" />
              </div>
              <div class="scree-size-them">
                <!-- 全屏 -->
                <div>
                  <ScreenFull />
                </div>
                <el-divider direction="vertical" />
                <!-- 大小 -->
                <div>
                  <SizeChange @cheage-font="size = $event"/>
                </div> 
                <el-divider direction="vertical" />
                <!-- 换肤 -->
                <div title='换肤'>
                  <ThemPicker size="default"/>
                </div>
                <el-divider direction="vertical" />
                <!-- 国际化 -->
                <div>
                  <Language />
                </div>
                <el-divider direction="vertical" />
                <!-- 头像 -->
                <div>
                  <UserHeader />
                </div>
              </div>
            </div>
            <!-- 标签页组件 -->
            <HeaderTags />
          </el-header>
          <!-- 视图渲染 -->
          <el-main>
            <transition name="slide-fade">
                <router-view />
            </transition>
          </el-main>
        </el-container>
      </el-config-provider>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'   //中文语言包
import en from 'element-plus/dist/locale/en.mjs'        //英文语言包
import { ref } from "vue"
import TreeMenu from "@/components/navigation/TreeMenu.vue"   //引入侧边菜单栏组件
import HeaderBreadcrumb from "../components/navigation/HeaderBreadcrumb.vue"  //引入面包屑
import HeaderTags from "../components/navigation/HeaderTags.vue"  // 换肤组件
import ThemPicker from "../components/thempicker/ThemPicker.vue"  // 引入标签页
import ScreenFull from "../components/screenfull/ScreenFull.vue"  // 全屏组件
import SizeChange from "../components/sizechange/SizeChange.vue"  // 尺寸大小组件
import Language from "../components/internationalization/Language.vue"  //国际化组件
import UserHeader from "../components/userheader/UserHeader.vue"  // 用户头像组件
const { locale } = useI18n()
// 侧边菜单栏折叠展开
let isCollapes = ref(false)
// 使用本地存储获取尺寸大小，使用短路运算符来执行
let size = ref(localStorage.getItem("sizeType") as string || "")
</script>

<style scoped lang="less">
// 主页容器样式
.index-container {
  width: 100vw;
  height: 100vh;
  // 组件主体容器
  .el-container {
    min-height: 100vh;
    // 左侧菜单栏样式
    .el-aside {
      background-color: #304156;
    }
    // 左边容器
    .el-container {
      // 左边上面容器
      .el-header {
        padding: 0px;
        height: 106px;
        .scree-size-them{
          width: 50%;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding-right: 20px;

          div{
            padding: 0px 2px;
          }
        }
      }
      .el-main{
        // 使用css计算函数
        height: calc(100vh - 106px);
        padding: 0px;
      }
    }
  }
}
.slide-fade-enter-active {
    transition: all 0.2s ease-out;
}
.slide-fade-leave-active {
    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translateX(-50px);
    opacity: 0;
}
</style>